<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      .select-box{
        min-height: 26px;
      }

      .select-box .select-box-item{
        display: inline-block;
        margin: 5px;
      }

      .line{
        height: 1px;
        background-color: var(--border-line);
      }

      .option-item{
        display: inline-block;
        border: 1px solid #3b2961;
        margin: 10px;
        padding: 5px;
      }

      .option-item.active{
        background-color: #3b2961;
        color: #fff;
      }

      .setting-footer{
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        display: flex;
        padding: 10px;
      }

      .transparent{
        flex: 1;
      }
      
      .save-btn{
        width: 52px;
        font-size: 16px;
        cursor: pointer;
        background-color: #6121eb;
        padding: 5px 10px;
        color: #fff;
        border-radius: 5px;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <tab-win>
      <div class="select-box"></div>
      <div class="line"></div>
      <div class="option-box">
        <div class="option-item" data-id="juejin">掘金</div>
        <div class="option-item" data-id="zhihu">知乎</div>
        <div class="option-item" data-id="baidu">百度</div>
        <div class="option-item" data-id="weibo">微博</div>
        <div class="option-item" data-id="douyin">抖音</div>
        <div class="option-item" data-id="shaoshupai">少数派</div>
        <div class="option-item" data-id="tieba">贴吧</div>
        <div class="option-item" data-id="jinritoutiao">今日头条</div>
        <div class="option-item" data-id="bilibili">哔哩哔哩</div>
      </div>
      <div class="setting-footer">
        <liu-slider class="transparent" value="100"></liu-slider>
        <div class="save-btn">保存</div>
      </div>
    </tab-win>
  </body>
  <script type="module">
    import TabWin from "../components/Window.js";
    import LiuSlider from "../components/Slider.js";
    customElements.define("tab-win", TabWin);
    customElements.define("liu-slider", LiuSlider);

    let data = [];
    let transparent = 100;
    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res) => {
        data = res.list || data;
        transparent = res.transparent || 100;
        liuSliderEl.setAttribute('value', transparent);
        initActive();
      });
    }


    const selectBoxEl = document.querySelector('.select-box')
    const optionEls = document.querySelectorAll('.option-item');
    const saveBtnEl = document.querySelector('.save-btn');
    const liuSliderEl = document.querySelector("liu-slider");

    optionEls.forEach(item=>{
      item.onclick = (e)=>{

        let bool = item.classList.toggle('active');
        if(bool){
          data.push({
            name: item.innerText,
            id: e.target.getAttribute('data-id')
          })
        }else{
          data = data.filter(item=>{
            return item.id !== e.target.getAttribute('data-id')
          })

        }
        renderSelect()
      }
    })

    const renderSelect = () => {
      selectBoxEl.innerHTML = ''
      data.forEach(item=>{
        let span = document.createElement('span');
        span.innerText = item.name;
        span.className = 'select-box-item';
        selectBoxEl.appendChild(span);

      })
    }

    const initActive = () => {
      renderSelect();
      data.forEach(item=>{
        optionEls.forEach(option=>{
          if(option.getAttribute('data-id') === item.id){
            option.classList.add('active')
          }
        })
      })
    }

    saveBtnEl.onclick = ()=>{
      if(window.toParentPage){
        window.toParentPage(data)
      }
    }

    liuSliderEl.onchange = (e) => {
      transparent = e.detail.value;
      if(window.toParentPage){
        window.toParentPage('', {transparent})
      }
    }



  </script>
</html>
